<template>
<div>

    <a-row style="padding-top: 20px;">
        <a-col :span="4">
            <a-button type="primary" style="height:100px;width: 80px;">
                <a-icon style="font-size: 30px;" type="caret-right" />
                <p>开始</p>
            </a-button>
        </a-col>
        <a-col :span="8" style="text-align:center;">
            <a-statistic title="完成量" :value="93" class="demo-class">
                <template #suffix>
                <span> / 100</span>
                </template>
            </a-statistic>
            <a-statistic-countdown :valueStyle="{
                'background': 'rgb(19, 136, 245)',
                'color': '#fff',
                'font-size': '18px',
                'border-radius': '2px',
                'width': '250px',
                'margin':'10px auto'
            }" :value="deadline" format="D 天 H 时 m 分 s 秒" />
        </a-col>
        <a-col :offset="4" :span="8">
            <template v-for="(button,i) in buttonDatas">
                <a-button v-if="i<5" :key="i" class="button-set" @click="buttonClick(button.value,i)" :type="button.type">{{button.text}}</a-button>
                <a-button v-else-if="i===5" :key="i" class="button-set" @click="buttonClick('',i)">...</a-button>
            </template>
        </a-col>
    </a-row>

    <div>
        <!-- <template v-for="(button,i) in buttonDatas">
            <a-button v-if="i<5" :key="i" class="button-set" @click="buttonClick(button.value,i)" :type="button.type">{{button.text}}</a-button>
            <a-button v-else-if="i===5" :key="i" class="button-set" @click="buttonClick('',i)">...</a-button>
        </template> -->
    </div>
    <!-- 展示全部按钮组 -->
    <a-modal v-model="visible" title="全部功能" @ok="handleOk">
        <a-row :gutter="[20,20]">
            <template v-for="(button,i) in buttonDatas">
                <a-col :key="i" :span="8" style="text-align:center;">
                    <a-button class="button-set" @click="modalButtonClick(button.value,i)" :type="button.type">{{button.text}}</a-button>
                </a-col>
            </template>
        </a-row>
    </a-modal>
</div>
</template>
<script>
export default {
  name: 'buttonGroup',
  props: [],
  data() {
    return {
      buttonDatas: [
        { text: '返工', value: 1 },
        { text: '报工', value: 2 },
        { text: 'bom清单', value: 3, type: 'primary' },
        { text: '维修', value: 4, type: 'primary' },
        { text: '异常', value: 5, type: 'primary' },
        { text: '按钮2', value: 6, type: 'primary' },
        { text: '按钮3', value: 7, type: 'primary' },
        { text: '按钮4', value: 8, type: 'primary' },
        { text: '按钮5', value: 9, type: 'primary' },
        { text: '按钮6', value: 10, type: 'primary' }
      ],
      visible: false,
       deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
    }
  },
  methods: {
    buttonClick(val, i) {
      if (i < 5) {
        alert(val)
      } else {
        this.visible = true
      }
    },
    modalButtonClick(val, i) {
      alert(val)
    },
    handleOk() {
      this.visible = false
    }
  }
}
</script>
<style scoped>
.button-set{
    width: 90px;
    height: 40px;
    margin:5px;
}
</style>
